import React from 'react';
import Uploader from '../../components/uploader';
export default class Post extends React.Component {

    constructor(...props) {
        super(...props);
        this.state = {
            title: '',
            desc: '',
            image: '',
            chance: 0,
            loading: false
        };
    }

    onInputChanged(e) {
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    onImageUploaded(url) {
        this.setState({image: url + '?imageView2/1/w/566'});
    }

    componentDidMount() {
        if (this.props.params.id) {
            $.get('/admin/prize/view', {
                id: this.props.params.id
            })
                .success((data)=> {
                    this.setState({title: data.title, desc: data.desc, image: data.image, chance: data.chance});
                }, 'json')
                .error((e)=> {
                    alert(e.responseJSON.errmsg);
                }, 'json');
        }
    }

    onSubmit(e) {
        e.preventDefault();
        if (!this.state.title) {
            alert('奖品名称不能为空');
            return;
        }
        if (!this.state.desc) {
            alert('奖品简介不能为空!');
            return;
        }
        if (!this.state.image) {
            alert('奖品图片不能为空');
            return;
        }
        if (this.state.chance < 0 || this.state.chance > 100) {
            alert('中奖概率应该介于0~100之间');
            return;
        }
        this.setState({loading: true});
        $.post('/admin/prize/post?id=' + (this.props.params.id || 0), this.state)
            .success((data)=> {
                alert('操作成功');
                this.setState({loading: false});
                this.context.router.push('/prize');

            }, 'json')
            .error((e)=> {
                alert(e.responseJSON.errmsg);
                this.setState({loading: false});
            }, 'json');
    }

    render() {
        return (
            <div className="site-prize prize-post">
                <h2>奖品设置</h2>
                <form action="" className="form-horizontal" onSubmit={e=>this.onSubmit(e)}>
                    <div className="form-group">
                        <label htmlFor="title" className="control-label col-md-2">名称</label>
                        <div className="col-md-4">
                            <input type="text" id="title" onChange={e=>this.onInputChanged(e)} className="form-control"
                                   value={this.state.title}/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label htmlFor="desc" className="control-label col-md-2">简介</label>
                        <div className="col-md-4">
                            <input type="text" id="desc" onChange={e=>this.onInputChanged(e)} className="form-control"
                                   value={this.state.desc}/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label htmlFor="image" className="control-label col-md-2">封面</label>
                        <div className="col-md-4">
                            <Uploader fileType="image/*" onUploaded={url=>this.onImageUploaded(url)}/>
                            <div className="help-block">
                                <p>建议大小： 566*200</p>
                                <img src={this.state.image} className="img-responsive" alt=""/>
                            </div>
                        </div>
                    </div>

                    <div className="form-group">
                        <label htmlFor="chance" className="control-label col-md-2">中奖概率</label>
                        <div className="col-md-4">
                            <input type="text" id="chance" onChange={e=>this.onInputChanged(e)} className="form-control"
                                   value={this.state.chance}/>
                            <div className="help-block">
                                中奖概率总和需等于100
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="col-md-2 col-md-offset-2">
                            <button className="btn btn-primary btn-block"
                                    disabled={this.state.loading}>{this.state.loading ? '提交中' : '提交'}</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}

Post.contextTypes = {
    router: React.PropTypes.object.isRequired
};